<template>
	<view class="container" :style="{background:background,backgroundRepeat:'no-repeat',backgroundSize:'cover'}">
		<navbar title="登录" background="transparent" color="#fff"></navbar>
		<view class="wrap">
			<view class="login-btn line_center" @click="authLogin" v-if='isBindMobile == 1'>
				<text>快捷登录</text>
			</view>
			<view class="phone-number" v-else>
				<view class="login-btn line_center" @click="getPhoneNumber" v-if='radio_priaty == 0'>
					<text>快捷登录</text>
				</view>
				<button @getphonenumber="getPhoneNumber" hover-class="none" open-type="getPhoneNumber"
					class="login-btn line_center" v-else>
					<text>快捷登录</text>
				</button>
			</view>
			<view class="priaty" @tap="changeRadio_priaty">
				<uni-icons type="checkbox-filled" color="#fff" size="20" v-if='radio_priaty == 1'></uni-icons>
				<uni-icons type="circle" color="#fff" size="20" v-else></uni-icons>
				<view class="priaty-text">我已阅读并同意 <view class="col" @tap.stop="prity_show">隐私政策</view>
				</view>
			</view>
		</view>
		<update-user-info :showModal="showUInfoModal" @close='close'></update-user-info>
	</view>
</template>

<script>
	import {
		resolve
	} from 'uri-js';
	import updateUserInfo from '../../../components/update-user-info/update-user-info.vue';
	const app = getApp();
	export default {
		components:{
			updateUserInfo,
		},
		data() {
			return {
				hostUrl: app.globalData.hostUrl,
				bgStyle: {
					background: `url(${app.globalData.hostUrl}/static/img/auth-bg.png)`,
					backgroundRepeat: 'no-repeat',
					backgroundSize: 'cover',
				},
				background: `url(${app.globalData.hostUrl}/static/img/auth-bg.png)`,
				radio_priaty: 0,
				auth_status: false,
				avatarUrl: '',
				nick_name: '',
				code: '',
				isBindMobile: 0,
				showUInfoModal: false,
			};
		},
		async onLoad() {
			const loginRes = await this.wxLogin();
			if (loginRes.errMsg == "login:ok") {
				app.globalRequest({
					api: app.getApi().loginApi.checkBindMobile,
					data: {
						code: loginRes.code
					},
					method: 'post',
				}).then(res => {
					console.log(res)
					if (res.code == 1) {
						this.isBindMobile = res.data.is_bind_mobile
					}
				}).catch(err => {

				})
			}
		},
		methods: {
			//设置微信登录
			wxLogin() {
				return new Promise((resolve, reject) => {
					uni.login({
						provider: 'weixin',
						success: function(res) {
							resolve(res)
						},
						fail: function(err) {
							reject(err)
						}
					})
				})
			},
			// 获取授权的手机号
			async getPhoneNumber(e) {
				console.log('e getPhoneNumber', e)
				let that = this;
				if (that.radio_priaty == 0) {
					uni.showToast({
						title: '请阅读并同意协议',
						icon: 'none'
					})
					return;
				}
				if (e.detail.errMsg == "getPhoneNumber:ok") {
					this.toLogin(1, e.detail)
				}
			},
			//绑定手机号
			getBindMobile(phone_res,u_info) {
				const that = this;
				app.globalRequest({
					api: app.getApi().user.getMobile,
					data: {
						iv: phone_res.iv,
						encryptedData: phone_res.encryptedData
					},
					method: 'post'
				}).then(res => {
					console.log('getBindMobile', res)
					uni.showToast({
						title: res.msg,
						icon: 'none'
					})
					if (!u_info.u_nickname) {
						this.showUInfoModal = true;
						return;
					}
				}).catch(err => {

				})
			},
			async toLogin(type = 0, phone_res) {
				uni.showLoading({
					title: '加载中...',
					mask: true
				})
				const loginRes = await this.wxLogin();
				console.log('type', type)
				if (loginRes.errMsg == "login:ok") {
					app.globalRequest({
						api: app.getApi().loginApi.wxLogin,
						data: {
							code: loginRes.code
						},
						method: 'post',
					}).then(res => {
						console.log(res)
						if (res.code == 1) {
							uni.setStorageSync('token', res.data.token);
							uni.setStorageSync('UID',res.data.uInfo.u_id)
							if (type == 1) {
								this.getBindMobile(phone_res,res.data.uInfo);
							} else {
								if (!res.data.uInfo.u_nickname) {
									this.showUInfoModal = true;
									return;
								}
								setTimeout(() => {
									uni.navigateBack({
										delta: 1
									})
								}, 1000)
							}
							
						} else {
							uni.showToast({
								title: res.msg,
								icon: 'success'
							})
						}
					}).catch(err => {

					})
				}
			},
			authLogin() {
				let that = this;
				if (that.radio_priaty == 0) {
					uni.showToast({
						title: '请阅读并同意协议',
						icon: 'none'
					})
					return;
				}
				this.toLogin(0)
			},
			close(){
				this.showUInfoModal = false;
				setTimeout(() => {
					uni.navigateBack({
						delta: 1
					})
				}, 1000)
			},
			// 跳转服务
			service_shows() {
				console.log(111)
				uni.navigateTo({
					url: '/pages/user/login/privacy?type=2'
				})
			},
			prity_show() {
				uni.navigateTo({
					url: '/pages/user/login/privacy?type=1'
				})
			},
			// 选中隐私政策和取消
			changeRadio_priaty() {
				if (this.radio_priaty == 0) {
					this.radio_priaty = 1
				} else {
					this.radio_priaty = 0
				}
			},
			// 弹窗显示和隐藏
			auth_box_hide: function() {
				if (this.radio_priaty == 0) {
					uni.showToast({
						title: '请阅读并同意协议',
						icon: 'none'
					})
					return
				}
				this.auth_status = !this.auth_status
				this.nick_name = ''
				this.avatarUrl = ''
			},
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		width: 100%;
		height: 100vh;
		position: relative;
	}

	.login-btn {
		width: 640rpx;
		height: 94rpx;
		background: $dis-liner-color;
		border-radius: 47rpx;
		margin: auto;
		font-size: 32rpx;
		color: #fff;
	}

	.wrap {
		position: absolute;
		left: 0;
		right: 0;
		margin: auto;
		bottom: 122rpx;
	}

	.priaty {
		color: #fff;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 24rpx;
		padding-top:134rpx;
		.col {
			color: $dis-font-color;
		}

		.priaty-text {
			display: flex;
			padding-left:10rpx;
		}
	}

	.radio-content {


		.col {
			color: #B38E65;
		}
	}

	.radio {
		padding: 4rpx;
		box-sizing: border-box;
		border-radius: 50%;
		border: 2rpx solid #CCCCCC;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		margin: 0rpx 15rpx;
	}

	.radio-active {
		width: 9px;
		height: 9px;
		border-radius: 50%;
		background-color: #B38E65;
	}

	.radio-active-add {
		width: 9px;
		height: 9px;
		border-radius: 50%;
		// background-color: #fff;
	}


	.radio-default {
		border: 2rpx solid #B38E65;
	}

	.auth_box {
		position: fixed;
		top: 0;
		width: 100%;
		height: 100vh;
		background-color: rgba(0, 0, 0, .3);

		.auth_box_bg {
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			margin: auto;
			width: 80%;
			height: 620rpx;
			background-color: #fff;
			border-radius: 30rpx;

			.auth_box_top {
				padding: 30rpx 40rpx;
				box-sizing: border-box;
				width: 100%;
				display: flex;
				align-items: center;
				justify-content: flex-end;

				text {
					font-size: 32rpx;
					font-weight: bold;
					font-family: 'PingFang SC';
				}

				image {
					width: 35rpx;
					height: 35rpx;
					margin-left: 50rpx;
				}
			}

			.auth_box_message {
				width: 100%;

				.auth_box_avatarUrl {
					width: 50%;
					margin: 10rpx auto;
					position: relative;
					text-align: center;

					.avatar {
						width: 150rpx;
						height: 150rpx;
						border-radius: 50%;
					}

					.photo {
						position: absolute;
						bottom: 10rpx;
						right: 80rpx;
						width: 50rpx;
						height: 50rpx;
					}
				}
			}

			.auth_box_name {
				display: flex;
				align-items: center;
				width: 80%;
				margin: 20rpx auto 0;

				text {
					font-size: 28rpx;
				}

				input {
					width: 80%;
					font-size: 24rpx;
					border-bottom: 2rpx solid #CECDD6;
					text-indent: 10rpx;
					color: #18181A;
				}
			}

			.auth_box_detail {
				width: 80%;
				padding: 20rpx;
				box-sizing: border-box;
				border-radius: 20rpx;
				margin: 30rpx auto;
				background-color: #F6F7FB;
				font-size: 24rpx;
				color: #CCCCCC;
				line-height: 40rpx;
			}

			.auth_box_btn {
				width: 80%;
				margin: 30rpx auto;
				background-color: #B38E65;
				border-radius: 40rpx;
				text-align: center;
				color: #fff;
				font-size: 28rpx;
				padding: 20rpx 0;
				box-sizing: border-box;
				letter-spacing: 2rpx;
			}
		}

		image {
			width: 20rpx;
			height: 20rpx;
		}
	}

	.avatar-wrapper {
		width: 100%;
		height: 100%;
		padding: 0;
		background-color: rgba(0, 0, 0, 0);

		&::after {
			border: 0;
		}
	}
</style>